<template>
		<view class="index-list animate__animated animate__fadeInLeft animate__fast">
			<view class="index-list1">
				<view>
					<image :src="item.userpic" mode="widthFix" lazy-load class="headimg"></image>
					{{item.username}}
				</view>
				<view class="f_center" v-show="!isguanzhu" @tap="guanzhu">
					<view class="icon iconfont icon-zengjia"></view><text>关注</text>
				</view>				
			</view>
			<view class="index-list2" @tap="opendetail">
				{{item.title}}
			</view>
			<view class="index-list3" @tap="opendetail">
				<image :src="item.titlepic" mode="widthFix" lazy-load></image>
				<template v-if="item.type=== 'video'">
				<view class="index-list-video icon iconfont icon-bofang"></view>
				<view class="index-list-playinfo">{{item.playnum}}次播放 {{item.playtime}}</view>
				</template>
			</view>
			<view class="index-list4">
				<view class="uni-flex">
					<view class="f_center" @tap="caozuo('ding')"><view class="icon iconfont icon-icon_xiaolian-mian" :class="{'ding_current':infonum.status===1}"></view><text>{{infonum.dingnum}}</text></view>
					<view class="f_center" @tap="caozuo('cai')"><view class="icon iconfont icon-kulian" :class="{'cai_current':infonum.status===2}"></view><text>{{infonum.cainum}}</text></view>
				</view>
				<view class="uni-flex">
					<view class="f_center"><view class="icon iconfont icon-pinglun1"></view><text>{{item.commentnum}}</text></view>
					<view class="f_center"><view class="icon iconfont icon-zhuanfa"></view><text>{{item.sharenum}}</text></view> 
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			}
		},
		data(){
			return {
					isguanzhu: this.item.isguanzhu,
					infonum : this.item.infonum
			}
		},
		methods:{
			guanzhu(){
				this.isguanzhu = true;
				uni.showToast({
					title: "关注成功"
				})
			},
			caozuo(type){
					if(type=="ding"){
						if(this.infonum.status == 1){return;} 
						this.infonum.dingnum += 1;
						if(this.infonum.status == 2){this.infonum.cainum -= 1;}
						this.infonum.status = 1;
					}else{
						if(this.infonum.status == 2){return;}
						this.infonum.cainum += 1;
						if(this.infonum.status == 1){this.infonum.dingnum -= 1;}
						this.infonum.status = 2;
					}				
			},
			opendetail(){
				uni.navigateTo({
					url:"../../pages/detail/detail?detailData="+JSON.stringify(this.item)
				})
			}
		}
	}
</script>

<style scope>
	.index-list{
		padding: 20upx;
		border-bottom: 1upx solid #EEE;
	}
	.index-list1{
		display: flex;
		justify-content: space-between ;
		align-items: center;
	}
	.index-list1>view:first-of-type{
		display: flex;
		align-items: center;
		color: #999;
	}
	.index-list1>view:first-of-type>image{
		height: 80upx;
		width: 80upx;
		border-radius: 50%;
	}
	.index-list1>view:last-of-type{
		display: flex;
		background-color: #f4f4f4;
		padding: 0 6upx;
		border-radius: 6upx;
	}
	.index-list1>view:last-of-type>view{
		font-size: 14px;
	}
	.index-list1>view:last-of-type>.icon{
		padding-right: 10upx;
	}
	.index-list2{
		font-size: 16px;
		padding: 20upx 0;
	}
	.index-list3{
		position: relative;
	}
	.index-list3>image{
		width: 100%;
		border-radius: 20upx;
	}
	.index-list3 .index-list-video{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 40px;
	}
	.index-list .index-list-playinfo{
		position: absolute;
		bottom: 30upx;
		right: 10upx;
		background-color: rgba(0,0,0,.4);
		border-radius: 40upx;
		padding: 10upx 20upx;
		color: #ffffff;
	}
	.index-list4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #d5d5d5;
	}
	.index-list4>view:last-of-type>view>view,.index-list4>view:first-of-type>view>view{
		padding: 0 16upx;
		display: flex;
	}
	.ding_current{
		color: #4CD964;
	}
	.cai_current{
		color: #FF3333;
	}
</style>

